<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale = 1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src='./common/js/reset.js'></script>
  <link rel="stylesheet" href="./common/css/reset.css">
  <!-- <link rel="stylesheet" href="./lib/css/mobiscroll.css"> -->
  <!-- <link rel="stylesheet" href="./lib/css/mobiscroll_date.css"> -->
  <!-- <link rel="stylesheet" href="./lib/css/normalize3.0.2.min.css"> -->
  <!-- <link rel="stylesheet" href="./lib/css/style.css"> -->
  <link rel="stylesheet" href="./lib/css/iosSelect.css">
  <link rel="stylesheet" href="./css/appointmentInfo.css">
  <link rel="stylesheet" href="./font/iconfont.css">
  <title>依米</title>
</head>

<body>
  <div class="header">
    <a class="iconfont icon-zuojiantou" href="./index.html"></a>
    填写手术预约信息
  </div>
  <div class="tip">
    <h3>预约说明</h3>
    <p>预约信息必须真实有效，方便后续联系，预约完成后请及时关注预约提醒。</p>
  </div>
  <div class="info">
    <ul>
      <li class="mt20">
        <label class="patient">请输入姓名：
                    <span class="red">*</span>
                    <input type="text" placeholder="请输入患者姓名或选择">
                </label>
      </li>
      <li>
        <label>性别
                    <input id="gender" type="text" placeholder="请选择性别" readonly>
                </label>
      </li>
      <li>
        <label>出生日期
                    
                    <input id="USER_AGE" type="text" placeholder="请选择生日" value = '' readonly>
                </label>
      </li>
      <li class="mt20">
        <label>与患者关系
                    <span class="red">*</span>
                    <input id ="relation" type="text" placeholder="请选择患者关系" readonly>
                </label>
      </li>
      <li class="mt20">
        <label>手机号码
                    <span class="red">*</span>
                    <input type="text" placeholder="便于获取医生回复通知">
                </label>
      </li>
      <li>
        <label>身份证号
                    <span class="red">*</span>
                    <input type="text" placeholder="请输入患者姓名或选择">
                </label>
      </li>
      <li class="mt20">
        <label>主刀医生
                    <span class="red">*</span>
                    <input class='operationDoctor'  type="text" placeholder="请选择主刀医生">
                </label>
      </li>
      <li>
        <label>手术医院
                    <span class="red">*</span>
                    <input type="text" >
                </label>
      </li>
      <li>
        <label>手术名称
                    <span class="red">*</span>
                    <input id = 'operationName' type="text" placeholder="请选择手术名称">
                </label>
      </li>
      <li>
        <label>预约时间
                    <span class="red">*</span>
                    <input class="selectAppointmentTime" type="text" placeholder="请选择手术日期">
                </label>
      </li>
    </ul>
    <div class="submit"><a href="./registerAffirm.html">确认提交信息</a></div>
  </div>
  <div class="user">
    <div class="listWrap">
      <h3>
        <!-- <span class = "cancel">取消</span> -->
        <span>请选择</span>
        <!-- <span class = "confirm">确认</span> -->
      </h3>
      <ul>
        <li>
          <img src="./images/login_logo.png" alt="">
          <p><span class="name">李四</span><span class="relation">(自己)</span></p>
          <p><span class="gender">男</span><span class="age">31</span></p>
        </li>
        <li>
          <img src="./images/login_logo.png" alt="">
          <p><span class="name">李三</span><span class="relation">(兄弟)</span></p>
          <p><span class="gender">男</span><span class="age">31</span></p>
        </li>
      </ul>
    </div>
  </div>
  <div class="doctorList">
    <div class="top">
      <i class="iconfont icon-zuojiantou"></i> 医生列表
    </div>
    <div class="search">
      <input type="text" placeholder="输入医生姓名">
    </div>
    <div class="diseaseType">
      <div class="positionWrap" flag="false">
        <div class="category">
          <div class="currentCity"><span class="currentPositionCity"> 选择疾病类型</span>
            <i class="iconfont icon-down"></i>
          </div>
        </div>
        <div class="panel">
          <div class="panelWrap" flag='false'>
            <div class="panel0">
              <div class="clearfix col">
                <ul class="province">
                  <li>常见疾病</li>
                  <li>内科</li>
                  <li>外科</li>
                  <li class="active">神经外科</li>
                  <li>功能神经外科</li>
                  <li>心血管外科</li>
                  <li>胸外科</li>
                  <li>整形科</li>
                  <li>整形科</li>
                  <li>整形科</li>
                  <li>整形科</li>
                  <li>整形科</li>
                  <li>整形科</li>
                </ul>
                <div class="cityWrap">
                  <div class="city">
                    <ul>
                      <li>
                        <span>全部</span>
                        <b>400家</b>
                      </li>
                      <li class="active">
                        <span>杭州</span>
                        <b>30家</b>
                      </li>
                      <li><span>湖州</span>
                        <b>300家</b>
                      </li>
                      <li><span>嘉兴</span>
                        <b>80家</b>
                      </li>
                      <li><span>金华</span>
                        <b>40家</b>
                      </li>
                      <li><span>金华</span>
                        <b>40家</b>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='doctor'>
      <ul>
        <li>
          <div>
            <img src="./images/personalCenter_my.png" alt=""> <br>
            <a href="doctorDetail.html">医生介绍</a>
          </div>
          <h3>杨康</h3>
          <p class="grey">手外科 主治医生</p>
          <p class='skill'>擅长治疗：<span class="grey">痔疮、 静脉曲张、 淋巴结肿大  </span> </p>
          <p class="tags">
            <span>知名医院</span>
            <span>从业13年</span>
            <span class="spel">专家</span>
          </p>
          <p class="selectMe">手术案例： 1000 例
            <span>选择</span>
          </p>
        </li>
        <li>
          <div>
            <img src="./images/personalCenter_my.png" alt=""> <br>
            <a href="">医生介绍</a>
          </div>
          <h3>杨康</h3>
          <p class="grey">手外科 主治医生</p>
          <p class='skill'>擅长治疗：<span class="grey">痔疮、 静脉曲张、 淋巴结肿大  </span> </p>
          <p class="tags">
            <span>知名医院</span>
            <span>从业13年</span>
            <span class="spel">专家</span>
          </p>
          <p class="selectMe">手术案例： 1000 例
            <span>选择</span>
          </p>
        </li>
        <li>
          <div>
            <img src="./images/personalCenter_my.png" alt=""> <br>
            <a href="">医生介绍</a>
          </div>
          <h3>黄蓉</h3>
          <p class="grey">手外科 主治医生</p>
          <p class='skill'>擅长治疗：<span class="grey">痔疮、 静脉曲张、 淋巴结肿大  </span> </p>
          <p class="tags">
            <span>知名医院</span>
            <span>从业13年</span>
            <span class="spel">专家</span>
          </p>
          <p class="selectMe">手术案例： 1000 例
            <span>选择</span>
          </p>
        </li>
        <li>
          <div>
            <img src="./images/personalCenter_my.png" alt=""> <br>
            <a href="">医生介绍</a>
          </div>
          <h3>洪七公</h3>
          <p class="grey">手外科 主治医生</p>
          <p class='skill'>擅长治疗：<span class="grey">痔疮、 静脉曲张、 淋巴结肿大  </span> </p>
          <p class="tags">
            <span>知名医院</span>
            <span>从业13年</span>
            <span class="spel">专家</span>
          </p>
          <p class="selectMe">手术案例： 1000 例
            <span>选择</span>
          </p>
        </li>
        <li>
          <div>
            <img src="./images/personalCenter_my.png" alt=""> <br>
            <a href="">医生介绍</a>
          </div>
          <h3>杨过</h3>
          <p class="grey">手外科 主治医生</p>
          <p class='skill'>擅长治疗：<span class="grey">痔疮、 静脉曲张、 淋巴结肿大  </span> </p>
          <p class="tags">
            <span>知名医院</span>
            <span>从业13年</span>
            <span class="spel">专家</span>
          </p>
          <p class="selectMe">手术案例： 1000 例
            <span>选择</span>
          </p>
        </li>

      </ul>
    </div>

  </div>
  <div class="appointmentTime">
    <div class="top">
      <i class="iconfont icon-jiantouyou"></i> 预约时间列表
    </div>
    <div class="myDoctor">
      <div>
        <img src="./images/personalCenter_my.png" alt="">
      </div>
      <h3><b>杨康</b> <span>手外科 主治医生</span> </h3>
      <p>北京大学第一医院</p>
      <p class='skill'>擅长治疗：<span class="grey">痔疮、 静脉曲张、 淋巴结肿大  </span> </p>
      <p class="selectMe">目前预约人数： 65 人
      </p>
    </div>
    <h4>杨康医生的手术排程</h4>
    <ul class="timeWrap">
      <li>
        <p class="month">本月</p>
        <p class="paddingLeft40">
          <span class="fullTime">2018-04-28 周一 下午  </span>
          <span class="when">一天后</span> <span class="rest">剩余预约 ( 3 )</span>
        </p>
        <p class="paddingLeft40 address">手术地点：北京协和医院（东院） <span>预&nbsp;&nbsp;约</span></p>
      </li>
      <li>
        <p class="month">五月</p>
        <p class="paddingLeft40">
          <span class="fullTime">2018-05-28 周一 下午  </span>
          <span class="when">三天后</span> <span class="rest">剩余预约 ( 4 )</span>
        </p>
        <p class="paddingLeft40 address">手术地点：北京协和医院（东院） <span>预&nbsp;&nbsp;约</span></p>
      </li>
    </ul>
  </div>


  <script src="./lib/jquery-1.11.3.min.js"></script>
  <script src="./lib/picker.min.js"></script>

  <!-- <script src="./lib/mobiscroll_date.js" charset="gb2312"></script> -->
  <!-- <script src="./lib/mobiscroll.js"></script> -->
  <script src='./lib/iosSelect.js'></script>
  <script type="text/javascript">
    // var selectDateDom = $('#USER_AGE');
    var showDateDom = $('#USER_AGE');
    // 初始化时间
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDate = now.getDate();
    showDateDom.attr('data-year', nowYear);
    showDateDom.attr('data-month', nowMonth);
    showDateDom.attr('data-date', nowDate);
    // 数据初始化
    function formatYear(nowYear) {
      var arr = [];
      for (var i = nowYear - 100; i <= nowYear; i++) {
        arr.push({
          id: i + '',
          value: i + '年'
        });
      }
      return arr;
    }

    function formatMonth() {
      var arr = [];
      for (var i = 1; i <= 12; i++) {
        arr.push({
          id: i + '',
          value: i + '月'
        });
      }
      return arr;
    }

    function formatDate(count) {
      var arr = [];
      for (var i = 1; i <= count; i++) {
        arr.push({
          id: i + '',
          value: i + '日'
        });
      }
      return arr;
    }
    var yearData = function(callback) {
      // settimeout只是模拟异步请求，真实情况可以去掉
      // setTimeout(function() {
      callback(formatYear(nowYear))
        // }, 2000)
    }
    var monthData = function(year, callback) {
      // settimeout只是模拟异步请求，真实情况可以去掉
      // setTimeout(function() {
      callback(formatMonth());
      // }, 2000);
    };
    var dateData = function(year, month, callback) {
      // settimeout只是模拟异步请求，真实情况可以去掉
      // setTimeout(function() {
      if (/^(1|3|5|7|8|10|12)$/.test(month)) {
        callback(formatDate(31));
      } else if (/^(4|6|9|11)$/.test(month)) {
        callback(formatDate(30));
      } else if (/^2$/.test(month)) {
        if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
          callback(formatDate(29));
        } else {
          callback(formatDate(28));
        }
      } else {
        throw new Error('month is illegal');
      }
      // }, 2000);
      // ajax请求可以这样写
      /*
      $.ajax({
          type: 'get',
          url: '/example',
          success: function(data) {
              callback(data);
          }
      });
      */
    };
    showDateDom.bind('click', function() {
      var oneLevelId = showDateDom.attr('data-year');
      var twoLevelId = showDateDom.attr('data-month');
      var threeLevelId = showDateDom.attr('data-date');
      var iosSelect = new IosSelect(3, [yearData, monthData, dateData], {
        title: '选择时间',
        itemHeight: 35,
        oneLevelId: oneLevelId,
        twoLevelId: twoLevelId,
        threeLevelId: threeLevelId,
        showLoading: true,
        callback: function(selectOneObj, selectTwoObj, selectThreeObj) {
          showDateDom.attr('data-year', selectOneObj.id);
          showDateDom.attr('data-month', selectTwoObj.id);
          showDateDom.attr('data-date', selectThreeObj.id);
          var age = selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value;
          console.log(age);
          $("#USER_AGE").val(age);

        }
      });
    });
  </script>
  <script src="./js/appointmentInfo.js"></script>
</body>

</html>